<template>
  <div class="btn-wrap">
    <n-input readonly clearable :value="props.value" @change="emits('change', $event)" />
    <DialogUsers
      v-if="props.dataMode == 'candidateUsers'"
      ref="refDialogUsers"
      @select="onSelect"
    />
    <DialogGroups
      v-if="props.dataMode == 'candidateGroups'"
      ref="refDialogGroups"
      @select="onSelect"
    />
  </div>
</template>

<script setup lang="ts">
  import { ref, reactive, provide, onMounted, watch } from 'vue'
  import DialogUsers from './DialogUsers.vue'
  import DialogGroups from './DialogGroups.vue'
  import type { Assign, DataMode } from './type.d'
  import { roleApi } from '@/api/modules/role'
  import { userApi } from '@/api/modules/user'
  import { deptApi } from '@/api/modules/dept'
  import { positionApi } from '@/api/modules/position'

  const emits = defineEmits(['update:value', 'change'])
  const props = defineProps<{ value: string; dataMode: DataMode; taskKey: string }>()

  const refDialogUsers = ref()
  const refDialogGroups = ref()

  provide('taskKey', props.taskKey)

  const state = reactive({
    selectValues: [] as Assign[]
  })
  const onSelect = (assigns: Assign[]) => {
    state.selectValues = assigns
    const ids = state.selectValues.map((val: any) => val.id)
    emits('change', ids.join(';'))
  }

  const parseValue = () => {
    if (props.value) {
      if (props.dataMode == 'candidateGroups') {
        //角色
        const ids: string[] = (props.value as string).split(';')
        roleApi.findByIds(ids).then((resp) => {
          if (resp.success) {
            refDialogGroups.value.init(resp.data)
          }
        })
      } else {
        if (props.value.indexOf('getByMyDeptPosition') >= 0) {
          //申请人部门+岗位
          positionApi.findByIds(getExpValue()).then((resp) => {
            if (resp.success) {
              refDialogUsers.value.init(resp.data, '申请人相关的', props.value)
            }
          })
        } else if (props.value.indexOf('getByMyDept') >= 0) {
          //申请人部门
          refDialogUsers.value.init(undefined, '申请人相关的', props.value)
        } else if (props.value.indexOf('getByDeptPosition') >= 0) {
          const expVal = getExpValue()
          Promise.all([deptApi.findByIds(expVal), positionApi.findByIds(expVal)]).then((values) => {
            const deptResp = values[0]
            const positionResp = values[1]
            if (deptResp.success && positionResp.success) {
              refDialogUsers.value.init(
                { dept: deptResp.data, position: positionResp.data },
                '部门+岗位',
                props.value
              )
            }
          })
        } else if (props.value.indexOf('getByPosition') >= 0) {
          positionApi.findByIds(getExpValue()).then((resp) => {
            if (resp.success) {
              refDialogUsers.value.init(resp.data, '岗位', props.value)
            }
          })
        } else if (props.value.indexOf('getByDept') >= 0) {
          deptApi.findByIds(getExpValue()).then((resp) => {
            if (resp.success) {
              refDialogUsers.value.init(resp.data, '部门', props.value)
            }
          })
        } else if (props.value.indexOf('getByBean') >= 0) {
          refDialogUsers.value.init(props.value, '自定义表达式', props.value)
        } else {
          const ids: string[] = (props.value as string).split(';')
          userApi.findByIds(ids).then((resp) => {
            if (resp.success) {
              refDialogUsers.value.init(resp.data, '用户', props.value)
            }
          })
        }
      }
    } else {
      if (props.dataMode == 'candidateGroups') {
        refDialogGroups.value.init(undefined)
      } else {
        refDialogUsers.value.init(undefined, '用户', props.value)
      }
    }
  }

  const getExpValue = () => {
    let content = props.value.match(/(?<=\()(.+?)(?=\))/g)
    const ids = content && content != null ? content[0] : ''
    return ids.replaceAll(/\'/g, '').split(',')
  }

  watch(
    () => props.value,
    () => parseValue()
  )
  onMounted(parseValue)
</script>

<style lang="scss" scoped>
  .btn-wrap {
    display: flex;
    align-items: center;
    gap: 4px;
  }
  .tag-wrap {
    line-height: normal;
    padding-top: 5px;
    width: 100%;
    border: 1px solid rgb(224, 224, 230);
    border-radius: 3px;
    padding-left: 12px;
    padding-right: 12px;
  }
</style>
